<!--  -->
<template>
  <div class="boss">
    <!-- input框 -->
    <div class="top">
      <template>
        <span style="margin-left:20px ">是否显示：</span>
        <el-select
          v-model="tableData.flag"
          placeholder="请选择"
          @change="onChange"
        >
          <el-option label="全选" :value="-1" />
          <el-option label="关闭" :value="false" />
          <el-option label="开启" :value="true" />
        </el-select>
      </template>
      <template>
        <span style="margin-left:20px ">商品搜索：</span>
        <el-input
          v-model="input"
          placeholder="请输入商品ID/名称"
          style="width:200px"
          @input="handleOnInput"
        />
        <el-button icon="el-icon-search" @click="searchData">搜索</el-button>
      </template>
    </div>
    <!-- 表格 -->
    <div class="boxTab">
      <el-table style="width: 100%" :data="filterData">
        <el-table-column label="ID" prop="id" align="center" />
        <el-table-column label="秒杀时段" prop="time" align="center" />
        <el-table-column label="商品图片" prop="date" align="center">
          <template slot-scope="scope">
            <img alt="" style="width:50px;height:50px" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column label="活动标题" prop="name" align="center" />
        <el-table-column label="活动简介" prop="word" align="center" />
        <el-table-column label="原价" prop="price" align="center" />
        <el-table-column label="秒杀价" prop="prices" align="center" />
        <el-table-column label="限量" prop="num" align="center" />
        <el-table-column label="限量剩余" prop="nums" align="center" />
        <el-table-column label="状态" prop="date" align="center">
          <el-switch
            v-model="scope.row.flag"
            slot-scope="scope"
            active-color="skyblue"
            inactive-color="#eee"
          />
        </el-table-column>
        <el-table-column label="创建时间" prop="timestamp" align="center" />
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="ruleForm"
        class="demo-form-inline"
      >
        <el-form-item label="活动标题">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="活动简介">
          <el-input v-model="ruleForm.word" />
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="confirm()">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分页 -->
    <div class="paging">
      <span />
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
// import { apiGetseckills } from "@/api/seekill";
import { apiSeckillCommodity } from "@/api/seckillCommodity.js";
export default {
  name: "Commodity",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      tableData: [], // 存放整体的数据
      filterData: [], // 切换truefalse状态
      search: "", // 自带的模糊搜索
      input: "", // 模糊搜索
      pageIndex: 1, // 默认起始页
      pageSize: 5, // 每页数据
      total: 0, // 总数据
      dialogVisible: false, // 控制弹框的
      ruleForm: {
        name: "", //活动标题
        word: "" //活动简介
      }
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const res = await apiSeckillCommodity({
      pageIndex: this.pageIndex,
      pageSize: this.pageSize
    });
    console.log(res, "Res");
    this.tableData = res.data;
    this.total = res.total;
    this.filterData = res.data;
    // apiSeckillCommodity().then(res => {
    //   console.log(res, "res");
    //   this.tableData = res.data.data;
    // });
  },
  // 方法集合
  methods: {
    // 编辑功能
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogVisible = true; // 打开弹窗
      this.ruleForm = { ...row };
    },
    // 确认按钮
    confirm() {
      // console.log(this.ruleForm, "ruleForm");
      // console.log(this.ruleForm.name, "name");
      this.filterData.forEach(item => {
        // console.log(item.id === this.ruleForm.id, item.id, this.ruleForm.id);
        if (item.id === this.ruleForm.id) {
          item.name = this.ruleForm.name;
          item.word = this.ruleForm.word;
        }
      });
      // 清空弹出框
      this.ruleForm = {
        name: ""
      };
      // 关闭弹框
      this.dialogVisible = false;
    },
    // 清空input框重新加载数据
    async handleOnInput() {
      if (this.input === "") {
        const res = await apiSeckillCommodity({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        });
        this.filterData = res.data;
      }
    },
    // 模糊搜索
    searchData() {
      console.log(this.input, "input");
      const result = this.filterData.filter(
        item => item.name.indexOf(this.input) >= 0
      );
      console.log(result);
      this.filterData = result;
    },
    // 删除功能
    handleDelete(index, row) {
      console.log(index, row);
      // filter删除
      // this.tableData = this.tableData.filter(item => {
      //   return item.id !== row.id;
      // });
      // splice删除;
      this.filterData.splice(index, 1);
      console.log(this, "this");
    },
    // 筛选开启关闭状态
    onChange(val) {
      console.log(val);
      this.filterData = this.tableData.filter(item => {
        return item.flag === val || val === -1;
      });
    },
    // 分页功能
    async currentChange(value) {
      this.pageIndex = value;
      const res = await apiSeckillCommodity({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      });
      // const res2 = await apiGetInfo()
      console.log("res", res);
      this.tableData = res.data;
      this.total = res.total;
      this.filterData = res.data;
    },
    // 关闭弹窗
    handleClose(done) {
      done();
    }
  }
};
</script>
<!--css样式-->
<style lang="scss" scoped>
.boss {
  margin: 20px;
  border: 1px solid #ccc;
  box-shadow: 10px 10px 5px #ccc;
}
.boxTab {
  margin-top: 5px;
  width: 100%;
  height: 96%;
  border: 1px solid #eee;
}
.top {
  margin: 20px;
}
.paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
}
</style>
